<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>用户删除，新增</title>
</head>
<body>
	<div id="app">
		<el-table
			ref="singleTable"
			:data="tableData"
			tooltip-effect="dark"
			highlight-current-row
			style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column
			  type="selection"
			  width="50">
			</el-table-column>
			<el-table-column
			prop="id"
			label="编号"
			width="120">
			</el-table-column>
			<el-table-column
			prop="name"
			label="姓名"
			width="120">
			</el-table-column>
			<el-table-column
			prop="sex"
			label="性别"
			width="120">
			</el-table-column>
			<el-table-column
			prop="password"
			label="密码"
			width="120"
			show-overflow-tooltip>
			</el-table-column>
			  <el-table-column label="操作">
				  <template slot="header" slot-scope="slot" >
					  操作&nbsp;&nbsp;
					  <el-button size="mini" type="success" @click="addUser">新增</el-button>
					  <el-button size="mini" type="danger"  @click="deleteChoosed">删除所选</el-button>
				  </template>
				  
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
					  type="primary"
			          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
			        <el-button
			          size="mini"
			          type="danger"
			          @click="handleDelete(scope.$index, scope.row)" @click='deleteChoosed'>删除</el-button>
			      </template>
			    </el-table-column>
			</el-table-column>
		</el-table>
		
		<el-dialog  v-bind:title="dialogTitle" :visible.sync="dialogFormVisible">
			
		  <el-form :model="form">
		    <el-form-item label="姓名" :label-width="formLabelWidth">
		      <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名"></el-input>
		    </el-form-item>
			
		    <el-form-item label="性别" :label-width="formLabelWidth">
		      <el-select v-model="form.sex" placeholder="请选择性别">
		        <el-option label="男" value="男"></el-option>
		        <el-option label="女" value="女"></el-option>
				<el-option label="雌雄同体" value="雌雄同体"></el-option>
		      </el-select>  
		  </el-form>
		  
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		  <!--  <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> -->
		   <el-button type="primary" @click="dialogConfirm">确 定</el-button>
		  </div>
		</el-dialog>
		
	</div>
	<script>
		var V=new Vue({
			el:'#app',
			data:{
				tableData:[
					{
					"id":"101",
					"name":"张三",
					"password":"123",
					"sex":"男"
					},{
					"id":"102",
					"name":"李思",
					"password":"456",
					"sex":"女"
					},{
					"id":"103",
					"name":"王五",
					"password":"789",
					"sex":"男"
					},{
					"id":"104",
					"name":"赵柳",
					"password":"666",
					"sex":"女"
					}
				],
				multipleSelection:[],
				  dialogFormVisible: false,
				        form: {
							id:'',
							name: '',
							sex: '',
							
					
				        },
				        formLabelWidth: '120px',
						dialogTitle:'',
						userIndex:'',
			},
			
			methods:{
				dialogConfirm(){
					if(this.dialogTitle=="新增用户"){
						this.confirmMessage('您 添加成功了!',()=>{
							this.tableData.push(this.form);
						})
						
					}else{
						this.confirmMessage('编辑成功了！',()=>{
							this.tableData[this.userIndex]=this.form;
							
						})
					}
					
					
				},
				
				confirmMessage(str,todo){
					if(this.form.name==""||this.form.sex==""||this.form.password==""){
							this.$message({
								type:'error',
								message:'抱歉，请重新输入!'
							});
							
						}else{
							todo();
							this.$message({
								type:'success',
								message:str
							});
							
							
						}	
						
						this.dialogFormVisible=false;
						
					},
					
				
				addUser(){
					// this.form.name='';
					// this.form.sex='';
					this.form={id:'',name:'',sex:''};
					
					this.dialogTitle='新增用户';
					this.dialogFormVisible=true;
					let length=this.tableData.length;
					let lastId=this.tableData[length-1].id;
					this.form.id=Number(lastId)+1;
					
				},
				
				handleSelectionChange(val){
					this.multipleSelection=val;
			},
			deleteMessage(str,todo){
				this.$confirm(str, '提示', {
				        confirmButtonText: '确定',
				        cancelButtonText: '取消',
				        type: 'warning'
				      }).then(() => {
						todo();
						this.$message({
				          type: 'success',
				          message: '您 删除成功 了!!'
				        });
				      }).catch(() => {
				        this.$message({
				          type: 'info',
				          message: '您 已取消删除！！'
				        });          
				      });
			},
			handleEdit(index,row){
				// console.log(row);
				this.dialogTitle='编辑用户'
				this.form=row;
				this.userIndex=index;
				this.dialogFormVisible=true;
				
			},
			
				handleDelete(index,row){
						this.deleteMessage(`确定是否删除用户${row.name}?`,()=>{
								this.tableData.splice(index,1);
					})
				},
					deleteChoosed(){
						this.deleteMessage(`确定是否删除所选用户?`,function(){
						// this.tableData=this.tableData.
						V.tableData=V.tableData.
						filter(x=>!V.multipleSelection.some(y=>y==x));
				})
			}
		},
	});
		
	</script>
	
</body>
</html>
